﻿@{
    ViewData["Title"] = "仪表板";
}

<div class="grid grid-cols-3 gap-5">
    <div class="flex flex-col col-span-2">
        <div class="panel">
            <div class="panel-title p-5">概览</div>
            <div class="panel-body panel-row p-5">
                <div class="grid grid-cols-4 w-full p-5">
                    <div>
                        <div class="text-center">站点</div>
                        <div class="text-center pt-5"><a href="/" class="font-20 color-primary">1</a></div>
                    </div>
                    <div>
                        <div class="text-center">数据库</div>
                        <div class="text-center pt-5"><a href="/" class="font-20 color-primary">1</a></div>
                    </div>
                    <div>
                        <div class="text-center">计划任务</div>
                        <div class="text-center pt-5"><a href="/" class="font-20 color-primary">1</a></div>
                    </div>
                    <div>
                        <div class="text-center">FTP</div>
                        <div class="text-center pt-5"><a href="/" class="font-20 color-primary">1</a></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel mt-5">
            <div class="panel-title p-5">状态</div>
            <div class="panel-body panel-row p-5">
                <div class="w-full grid grid-cols-5 p-5">
                    <div class="flex flex-col justify-center items-center">
                        <div class="progress-1"></div>
                        <span>负载</span>
                    </div>
                    <div class="flex flex-col justify-center items-center">
                        <div class="progress-2"></div>
                        <span>CPU</span>
                    </div>
                    <div class="flex flex-col justify-center items-center">
                        <div class="progress-3"></div>
                        <span>内存</span>
                    </div>
                    <div class="flex flex-col justify-center items-center">
                        <div class="progress-4"></div>
                        <span>磁盘</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="">
        <div class="panel">
            <div class="panel-title p-5">系统信息</div>
            <div class="panel-body panel-row p-5">
                <table class="bp-table w-full">
                    <tbody>
                    <tr>
                        <td class="bp-td" style="width:100px">主机名称</td>
                        <td>iZ8vbbyz2u3851c1bqee25Z</td>
                    </tr>
                    <tr>
                        <td class="bp-td">发行版本</td>
                        <td>ubuntu</td>
                    </tr>
                    <tr>
                        <td class="bp-td">内核版本</td>
                        <td>5.15.0-92-generic</td>
                    </tr>
                    <tr>
                        <td class="bp-td">系统类型</td>
                        <td>x86_64</td>
                    </tr>
                    <tr>
                        <td class="bp-td">主机地址</td>
                        <td>172.16.0.166</td>
                    </tr>
                    <tr>
                        <td class="bp-td">启动时间</td>
                        <td>2024-04-28 16:11:05</td>
                    </tr>
                    <tr>
                        <td class="bp-td">运行时间</td>
                        <td>213天 22小时 31分钟 29秒</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@section Scripts



{
    <script src="/js/ciecle-progress.js"></script>
    <script>
        let p1 = 0;
        let p2 = 0;
        let p3 = 0;
        let p4 = 0;
        const p1Progress = new CircleProgress('.progress-1', {
            max: 100,
            value: 0,
            textFormat: 'percent',
        });

        const p2Progress = new CircleProgress('.progress-2', {
            max: 100,
            value: 0,
            textFormat: 'percent',
        });
        const p3Progress = new CircleProgress('.progress-3', {
            max: 100,
            value: 0,
            textFormat: 'percent',
        });
        const p4Progress = new CircleProgress('.progress-4', {
            max: 100,
            value: 0,
            textFormat: 'percent',
        });

        setInterval(function () {
            p1Progress.value = getRandom(0,30);
            p2Progress.value = getRandom(0,35);
            p3Progress.value = getRandom(0,30);
            p4Progress.value = getRandom(0,30);
        }, 2000);
        
        function getRandom(min, max){
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
    </script>
}
